<template>
	<view class="finacial">
		<view class="head">
			<view class="nav">
				<view class="left"></view>
				<view class="title">
					{{navTitle}}
				</view>
				<view class="right" @click="goList()">
					<image src="../../static/images/financial/icon.png" mode=""></image>
				</view>
			</view>
			<view class="obvious">
				<view class="row" v-for="(item,index) in detail" :key="index">
					<view class="num">{{item.num}}</view>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</view>

		<view class="productTitle">
			Prouct type
		</view>
		<view class="productType">
			<view class="productContent">
				<view class="row" v-for="(item,index) in productTypes" :key="index">
					<view class="type">
						<text>{{item.name}}</text>
					</view>
					<view class="detail">
						<view class="interestRate">
							One day：<text>Interest rate+{{item.profit_percent*100|numFilter}}%</text>
						</view>
						<view class="time">
							[set] {{item.day}} days<text>+{{toFixed(item.profit_percent*item.day*100)}}%</text>
						</view>
					</view>
					<view class="deposit" @click="deposit()">
						Deposit
					</view>
				</view>
			</view>
		</view>
		<ZTabbar :current="3" />
	</view>
</template>

<script>
	import context from '../../main.js';
	import ZTabbar from '@/components/ZTabbar/index.vue';
	import fetch from '@/common/fetch.js';
	export default {
		components: {
			ZTabbar
		},

		data() {
			return {
				navTitle: context.$t('financial.title'),
				detail: [],
				productTypes: []
			}
		},
		filters: {
			numFilter(value) {
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}

		},
		onLoad() {
			this.getData()
			this.getConfig()
		},
		methods: {
			toFixed(num) {
				if (num !== undefined) return num.toFixed(2);
			},
			goList() {
				uni.navigateTo({
					url: '/pages/personal/subpage/interest/index'
				})
			},
			getData() {
				fetch.request('/index/Yulibao/index', '', 'GET').then(res => {
					console.log(res)
					if (res.code === 0 || res.code === '0') {
						this.detail.push({
							name: context.$t('financial.total'),
							num: res.data.total_asset
						});
						this.detail.push({
							name: context.$t('financial.income'),
							num: res.data.total_profit
						});
						this.detail.push({
							name: context.$t('financial.earning'),
							num: res.data.today_profit
						});
					}
				})
			},
			getConfig() {
				fetch.request('/index/Yulibao/configlist', '', 'GET').then(res => {
					if (res.code === 0 || res.code === '0') {
						console.log('we', res.data)
						this.productTypes = res.data.data
						// for (var i = 0; i < 20; i++) {
						// 	this.productTypes.push({
						// 		day: 7,
						// 		id: 12,
						// 		name: "A",
						// 		profit_percent: "0.0500"
						// 	})
						// }
					}
				})
			},
			deposit() {
				uni.navigateTo({
					url: '/pages/personal/subpage/interest/withdraw'
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	@font-face {
		font-family: 'ESPYXN';
		src: url('../../static/iconfont/ESPYXN_DINEngschriftStd.ttf');
	}

	page {
		background-color: #fff;

		.finacial {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			overflow: hidden;

			.head {
				position: relative;
				top: 0;
				width: 100%;

				.nav {
					display: flex;
					flex-direction: row;
					height: 100px;
					background-image: url('../../static/images/financial/top.png');
					background-size: 100% 100%;

					.left {
						margin: 0 20px;
						flex: 1;
						width: 40px;

						image {
							width: 13px;
							height: 16px;
						}
					}

					.title {

						flex: 6;
						text-align: center;
						font-size: 16px;
						color: #fff;
						margin-top: 20px;
					}

					.right {
						flex: 1;
						margin: 20px 8px;
						width: 40px;

						image {
							width: 25px;
							height: 25px;
						}

					}

				}

				.obvious {
					width: 90%;
					height: 80px;
					border-radius: 10px;
					background-color: #fff;
					margin: 0 auto;
					margin-top: -40px;
					z-index: 10;
					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
					display: flex;


					.row {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-family: 'ESPYXN';

						.num {
							font-size: 30px;
						}

						.name {
							font-size: 22rpx;
							color: #A4A4AD;
							white-space: nowrap;
						}
					}
				}
			}

			.productTitle {
				position: relative;
				margin: 20px 0 10px 20px;
			}

			.productType {
				width: 100%;
				position: absolute;
				top: 185px;
				bottom: 50px;
				height: 500px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				overflow-y: auto;

				.productContent {
					position: relative;
					width: 100%;
					height: 100%;

					.row {
						display: flex;
						flex-direction: row;
						align-items: center;
						background-image: url(../../static/images/financial/wrap.png);
						background-size: 100% 100%;
						margin: 10px 20px;
						height: 60px;

						.type {
							flex: 1;
							color: #fff;
							text-align: center;
							margin-left: -10px;

							.min {
								margin-right: 5px;
								font-size: 14px;
							}

							.big {
								font-size: 20px;
							}
						}

						.detail {
							flex: 2;
							text-align: left;

							.interestRate {
								text {
									color: orange;
								}

							}

							.time {
								font-weight: bold;
								margin-top: 5px;

								text {
									width: 80px;
									height: 5px;
									color: #fff;
									background-color: #f53d46;
									padding: 2px 10px;
									margin-left: 10px;
									border-radius: 2px;
								}
							}
						}

						.deposit {
							margin: 0 10px;
							fle: 1;
							color: #6cda89;
						}
					}
				}
			}
		}
	}
</style>
